<template>
  <div class="loanList">
    <div class="loanItem" v-for="item in contractList" :key="item.contractNo">
      <img src="../../static/myLoan/hetongxinxi_bg.png" alt="" class="ItemBg" />
      <div class="contractState">
        {{item.contractStatus==='0'?"签署中":
        item.contractStatus==='1'?"生效":
        item.contractStatus==='2'?"冻结":
        item.contractStatus==='3'?"终止":
        item.contractStatus==='4'?"完成":
        item.contractStatus==='5'?"解冻":""}}
      </div>
      <div class="contractNumTitle">合同金额</div>
      <div class="loanNum">
        <div>
          ￥<span>{{ item.limit }}</span>
        </div>
        <div class="yearRate">
          年利率<span class="rateNum">{{ item.rate }}</span
          >%
        </div>
      </div>
      <div class="contractId">
        合同编号：<span>{{ item.contractNo }}</span>
      </div>
      <div class="productName">
        <div>产品名称：<span>科行e贷</span></div>
        <div>
          签约手机号：<span>{{ item.custPhone }}</span>
        </div>
      </div>
      <div class="signTime">
        起始日期：<span>{{ item.contractBeginDate }}</span>
      </div>
      <div class="signDate">
        结束日期：<span>{{ item.contractEndDate }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as http from "../../utils/http";
const contractList = reactive([]);
onMounted(() => {
  http.myLoan().then((res) => {
    contractList.push(...res.data.contractInfoList);
  });
});
</script>

<style scoped lang="scss">
.loanList {
  width: 100%;
  .loanItem {
    height: 352rpx;
    margin: 30rpx 24rpx;
    padding: 47rpx 30rpx 19rpx 30rpx;
    position: relative;
    .ItemBg {
      width: 702rpx;
      height: 352rpx;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -99999;
    }
    .contractState {
      position: absolute;
      top: 2rpx;
      right: 38rpx;
      color: #fff;
      height: 33rpx;
      line-height: 33rpx;
    }
    .contractNumTitle {
      height: 33rpx;
      line-height: 33rpx;
      color: #333;
    }
    .loanNum {
      margin-top: -7rpx;
      height: 70rpx;
      line-height: 70rpx;
      color: #307be5;
      font-size: 50rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .yearRate {
        color: #333;
        font-size: 24rpx;
        .rateNum {
          margin-left: 12rpx;
          font-size: 30rpx;
        }
      }
    }
    .contractId {
      margin-top: 20rpx;
    }
    .productName {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 12rpx 0;
    }
    .signTime {
      margin-bottom: 14rpx;
    }
  }
}
</style>
<style>
page {
  background-color: #f8f9fa;
}
</style>
